<template>
	<div class="app-edit">
		<div class="h-panel">
			<div class="h-panel-bar">
				<span class="h-panel-title">编辑页面</span>
				<span class="h-panel-right"><a @click="close"><i class="icon guanbi"></i></a></span>
			</div>
			<div class="h-panel-body" style="display: flex;">
				<div style="width: 110px;">
					<div class="bg-primary-color white-color" style="padding: 5px;">组件列表</div>
					<draggable :list="componentList" :options="dragOptions1" @end="copyEnd">
						<transition-group class="app-component-list" type="transition" :name="'flip-list'" tag="div">
							<div v-for="(item,index) in componentList" :key="'cl'+index">
								<p><i :class="leftComponent[item.sign].icon"></i></p>
								<p>{{leftComponent[item.sign].name}}</p>
							</div>
						</transition-group>
					</draggable>
				</div>
				<div style="width: 380px;">
					<div class="bg-dark-color white-color" style="padding: 5px;">将需要的组件拖动此处</div>
					<draggable :list="componentUsed" :options="dragOptions2">
						<transition-group class="phone-component" type="transition" :name="'flip-list'" tag="div">
							<div v-for="(item,index) in componentUsed" :key="'cu'+index" class="phone-component-item" :class="componentIndex==index ? 'checked' : ''" @click="componentIndex=index">
								<PostForm v-if="item.sign=='postForm'" :url="item.url" :form_id="item.form_id" :button="item.button"></PostForm>
								<TopBox v-if="item.sign=='topBox'" :float="item.float" :name="item.name" :type="item.type" :path="item.path"></TopBox>
								<UserBox v-if="item.sign=='userBox'" :pic="item.pic"></UserBox>
								<ButtonBox v-if="item.sign=='buttonBox'" :row="item.row" :margin="item.margin" :datas="item.datas"></ButtonBox>
								<ImgBox v-if="item.sign=='imgBox'" :datas="item.datas" :height="item.height"></ImgBox>
								<Search v-if="item.sign=='search'" :margin="item.margin" :name="item.name"></Search>
								<SwiperBox v-if="item.sign=='swiperBox'" :mode="item.mode" :height="item.height" :datas="item.datas"></SwiperBox>
								<BannerBox v-if="item.sign=='bannerBox'" :pic="item.pic" :name="item.name" :desc="item.desc"></BannerBox>
								<ListBox v-if="item.sign=='listBox'" :margin="item.margin" :pic="item.pic" :url="item.url" :path="item.path" :datas="item.datas" :type="item.type" :filter="item.filter"></ListBox>
								<TabBar v-if="item.sign=='tabBar'" :datas="item.datas"></TabBar>
								<ParserBox v-if="item.sign=='parserBox'" :datas="item.datas"></ParserBox>
								<CategoryBox v-if="item.sign=='categoryBox'" :url="item.url" :datas="item.datas"></CategoryBox>
								<InfoBox v-if="item.sign=='infoBox'" :url="item.url" :field="item.field" :prefix="item.prefix" :extend="item.extend" :parserBox="item.parserBox" :swiperBox="item.swiperBox" :magicBlock="item.magicBlock" :postForm="item.postForm"></InfoBox>
								<MagicBlock v-if="item.sign=='magicBlock'" :font="item.font" :pic="item.pic" :event="item.event" :config="item.config" :float="item.float"></MagicBlock>
							</div>
						</transition-group>
					</draggable>
				</div>
				<div style="width: calc(100% - 475px);">
					<div class="bg-primary-color white-color" style="padding: 5px;">页面内容</div>
					<Form :label-width="50" mode="threecolumn">
						<FormItem label="名称">
							<input type="text" v-model="data.name"/>
						</FormItem>
						<FormItem label="路径">
							<input type="text" v-model="data.path" readonly/>
						</FormItem>
						<FormItem>
							<Button color="primary" :loading="loading" @click="submit">保存</Button>
						</FormItem>
					</Form>
					<div class="bg-primary-color white-color" style="padding: 5px;" v-if="componentIndex == -1">
						设计说明
					</div>
					<div style="text-align: center;font-size: 40px;padding-top: 100px;" v-if="componentIndex == -1">请点击中间预览区选择组件!</div>
					<div class="bg-primary-color white-color" style="padding: 5px;" v-if="componentIndex > -1">
						<i :class="leftComponent[componentUsed[componentIndex].sign].icon"></i> {{leftComponent[componentUsed[componentIndex].sign].name}}
					</div>
					<Form :label-width="0" mode="threecolumn" align="center" v-if="componentIndex > -1">
						<FormItem>
							<Button size="s" color="green" :disabled="!(componentIndex > 0)" @click="upEle(componentIndex)">上移</Button>
						</FormItem>
						<FormItem >
							<Button size="s" color="blue" :disabled="!(componentIndex < componentUsed.length-1 && componentIndex != -1)" @click="downEle(componentIndex)">下移</Button>
						</FormItem>
						<FormItem>
							<Poptip :disabled="componentIndex == -1" @confirm="removeEle(componentIndex)" content="确定删除？">
								<Button size="s" :disabled="componentIndex == -1" color="red">删除</Button>
							</Poptip>
						</FormItem>
					</Form>
					<div class="bg-primary-color white-color" style="padding: 5px;" v-if="componentIndex > -1">组件设置</div>
					<Form :label-width="50" mode="twocolumn" v-if="componentIndex > -1" class="formSet">
						<FormItem label="浮动" single v-if="componentUsed[componentIndex].sign=='topBox' || componentUsed[componentIndex].sign=='magicBlock'">
							<h-switch v-model="componentUsed[componentIndex].float" @input="refresh">
								<span slot="open">开启</span>
								<span slot="close">关闭</span>
							</h-switch>
						</FormItem>
						<FormItem label="样式" single v-if="componentUsed[componentIndex].sign=='topBox'">
							<Radio v-model="componentUsed[componentIndex].type" :datas="[{name:'搜索样式',id:1},{name:'文字标题',id:2}]"></Radio>
						</FormItem>
						<FormItem label="内容" single v-if="componentUsed[componentIndex].sign=='topBox' || componentUsed[componentIndex].sign=='bannerBox' || componentUsed[componentIndex].sign=='search'">
							<input type="text" v-model="componentUsed[componentIndex].name"/>
						</FormItem>
						<FormItem label="简介" single v-if="componentUsed[componentIndex].sign=='bannerBox'">
							<textarea type="text" v-model="componentUsed[componentIndex].desc"></textarea>
						</FormItem>
						<div class="datasList" v-if="componentUsed[componentIndex].sign=='listBox'">
							<div v-for="(item, index) of componentUsed[componentIndex].datas" :key="index" class="datasItem">
								<FormItem label="名称">
									<input type="text" v-model="item.name"/>
								</FormItem>
								<FormItem label="简介">
									<input type="text" v-model="item.desc"/>
								</FormItem>
								<FormItem label="配置">
									<Button color="primary" size="s" @click="setParam(index)">参数</Button>
									<Button color="primary" size="s" @click="setField(index)">字段</Button>
									<Button color="primary" size="s" @click="setPrefix(index)">前缀</Button>
								</FormItem>
								<FormItem label="其他">
									<h-switch v-model="item.row" @input="refresh">
										<span slot="open">单列</span>
										<span slot="close">双列</span>
									</h-switch>
									<h-switch v-model="item.scroll" @input="refresh">
										<span slot="open">纵向</span>
										<span slot="close">横向</span>
									</h-switch>
									<h-switch v-model="item.load">
										<span slot="open">更多</span>
										<span slot="close">固定</span>
									</h-switch>
								</FormItem>
								<Poptip @confirm="removeDatas(index)" content="确定删除？">
									<Button text-color="red" :no-border="true" icon="h-icon-trash" class="delete"></Button>
								</Poptip>
							</div>
							<div class="addnew" @click="addDatas()"><a>新增</a></div>
						</div>
						<div v-if="componentUsed[componentIndex].sign=='postForm'">
							<FormItem label="表单">
								<Select v-model="componentUsed[componentIndex].form_id" :datas="$global.config.forms" className="select-demo"></Select>
							</FormItem>
							<FormItem label="按钮">
								<h-switch v-model="componentUsed[componentIndex].button" @input="refresh">
									<span slot="open">显示</span>
									<span slot="close">隐藏</span>
								</h-switch>
							</FormItem>
						</div>
						<FormItem label="模型" v-if="componentUsed[componentIndex].sign=='listBox' || componentUsed[componentIndex].sign=='infoBox' || componentUsed[componentIndex].sign=='postForm' || componentUsed[componentIndex].sign=='categoryBox'">
							<Select keyName="url" v-model="componentUsed[componentIndex].url" :datas="styleConfig.models" className="select-demo" @input="changeModel"></Select>
						</FormItem>
						<FormItem label="扩展" v-if="componentUsed[componentIndex].sign=='infoBox'">
							<h-switch v-model="componentUsed[componentIndex].extend" @input="refresh">
								<span slot="open">显示</span>
								<span slot="close">隐藏</span>
							</h-switch>
						</FormItem>
						<FormItem label="跳转" v-if="componentUsed[componentIndex].sign=='listBox' || (componentUsed[componentIndex].sign=='topBox' && componentUsed[componentIndex].type==1)">
							<AutoComplete type="title" :must-match="false" :option="{keyName:'path',titleName:'path'}" :datas="styleConfig.paths" v-model="componentUsed[componentIndex].path">
								<template slot="item" slot-scope="{item}">
									<div>{{item.value.path}}<span class="float-right gray-color">{{item.value.name}}</span></div>
								</template>
							</AutoComplete>
						</FormItem>
						<FormItem label="标签" v-if="componentUsed[componentIndex].sign=='listBox'">
							<h-switch v-model="componentUsed[componentIndex].type" @input="refresh">
								<span slot="open">显示</span>
								<span slot="close">隐藏</span>
							</h-switch>
						</FormItem>
						<FormItem label="筛选" v-if="componentUsed[componentIndex].sign=='listBox'">
							<h-switch v-model="componentUsed[componentIndex].filter" @input="refresh">
								<span slot="open">显示</span>
								<span slot="close">隐藏</span>
							</h-switch>
						</FormItem>
						<div class="datasList" v-if="componentUsed[componentIndex].sign=='swiperBox' || componentUsed[componentIndex].sign=='buttonBox' || componentUsed[componentIndex].sign=='imgBox' || componentUsed[componentIndex].sign=='tabBar'">
							<div v-for="(items, index) of componentUsed[componentIndex].datas" :key="index" class="datasItem">
								<FormItem label="名称" v-if="componentUsed[componentIndex].sign=='buttonBox' || componentUsed[componentIndex].sign=='tabBar'">
									<input type="text" v-model="items.name"/>
								</FormItem>
								<FormItem label="简介" v-if="componentUsed[componentIndex].sign=='buttonBox'">
									<input type="text" v-model="items.desc"/>
								</FormItem>
								<FormItem label="跳转">
									<AutoComplete type="title" :must-match="false" :option="{keyName:'path',titleName:'path'}" :datas="styleConfig.paths" v-model="items.path">
										<template slot="item" slot-scope="{item}">
											<div>{{item.value.path}}<span class="float-right gray-color">{{item.value.name}}</span></div>
										</template>
									</AutoComplete>
								</FormItem>
								<FormItem label="图片">
									<Upload v-model="items.pic"></Upload>
								</FormItem>
								<FormItem label="选中" v-if="componentUsed[componentIndex].sign=='tabBar'">
									<Upload v-model="items.selected"></Upload>
								</FormItem>
								<Poptip @confirm="removeDatas(index)" content="确定删除？">
									<Button text-color="red" :no-border="true" icon="h-icon-trash" class="delete"></Button>
								</Poptip>
							</div>
							<div class="addnew" @click="addDatas()"><a>新增</a></div>
						</div>
						<div v-if="componentUsed[componentIndex].sign=='magicBlock'">
							<FormItem label="大小">
								<Slider v-model="componentUsed[componentIndex].font.size" :range="{start:10,end:100}"></Slider>
							</FormItem>
							<FormItem label="颜色">
								<ColorPicker v-model="componentUsed[componentIndex].font.color" colorType="hex" :useConfirm="true"></ColorPicker>
							</FormItem>
							<FormItem label="内容">
								<input type="text" v-model="componentUsed[componentIndex].font.text"/>
							</FormItem>
						</div>
						<FormItem label="图片" single v-if="componentUsed[componentIndex].sign=='magicBlock' || componentUsed[componentIndex].sign=='bannerBox' || componentUsed[componentIndex].sign=='listBox' || componentUsed[componentIndex].sign=='userBox'">
							<Upload v-model="componentUsed[componentIndex].pic"></Upload>
						</FormItem>
						<FormItem label="样式" v-if="componentUsed[componentIndex].sign=='buttonBox'">
							<h-switch v-model="componentUsed[componentIndex].row" :trueValue="1" :falseValue="0">
								<span slot="open">纵向</span>
								<span slot="close">横向</span>
							</h-switch>
						</FormItem>
						<FormItem label="模式" v-if="componentUsed[componentIndex].sign=='swiperBox'">
							<Radio v-model="componentUsed[componentIndex].mode" :datas="['scaleToFill','aspectFit','aspectFill']"></Radio>
						</FormItem>
						<FormItem label="高度" v-if="componentUsed[componentIndex].sign=='swiperBox' || (componentUsed[componentIndex].sign=='imgBox' && componentUsed[componentIndex].datas.length == 1)">
							<Slider v-model="componentUsed[componentIndex].height" :range="{start:0,end:100}"></Slider>
						</FormItem>
						<div v-if="componentUsed[componentIndex].sign=='magicBlock'">
							<FormItem label="X坐标">
								<Slider v-model="componentUsed[componentIndex].config.left" :range="{start:0,end:100}"></Slider>
							</FormItem>
							<FormItem label="Y坐标">
								<Slider v-model="componentUsed[componentIndex].config.top" :range="{start:0,end:100}"></Slider>
							</FormItem>
							<FormItem label="宽度">
								<Slider v-model="componentUsed[componentIndex].config.width" :range="{start:0,end:100}"></Slider>
							</FormItem>
							<FormItem label="高度">
								<Slider v-model="componentUsed[componentIndex].config.height" :range="{start:0,end:100}"></Slider>
							</FormItem>
							<FormItem label="圆角">
								<Slider v-model="componentUsed[componentIndex].config.radius" :range="{start:0,end:50}"></Slider>
							</FormItem>
							<FormItem label="背景">
								<ColorPicker v-model="componentUsed[componentIndex].config.background" colorType="hex" :useConfirm="true"></ColorPicker>
							</FormItem>
						</div>
						<FormItem label="事件" single v-if="componentUsed[componentIndex].sign=='magicBlock'">
							<AutoComplete type="title" :must-match="false" :option="{keyName:'event',titleName:'event'}" :datas="events" v-model="componentUsed[componentIndex].event">
								<template slot="item" slot-scope="{item}">
									<div>{{item.value.event}}<span class="float-right gray-color">{{item.value.name}}</span></div>
								</template>
							</AutoComplete>
						</FormItem>
						<FormItem label="间距" v-if="componentUsed[componentIndex].sign=='listBox' || componentUsed[componentIndex].sign=='buttonBox' || componentUsed[componentIndex].sign=='search'">
							<Slider v-model="componentUsed[componentIndex].margin" :range="{start:0,end:10}"></Slider>
						</FormItem>
						<FormItem label="内容" single v-if="componentUsed[componentIndex].sign=='parserBox'">
							<RichTextEditor v-model="componentUsed[componentIndex].datas"></RichTextEditor>
						</FormItem>
						<FormItem label="内容" single v-if="componentUsed[componentIndex].sign=='infoBox'">
							<Form :label-width="70" mode="twocolumn" v-if="fields">
								<FormItem label="字段①">
									<Select v-model="componentUsed[componentIndex].field.data1" className="select-demo" :datas="fields"></Select>
								</FormItem>
								<FormItem label="前缀①">
									<input type="text" v-model="componentUsed[componentIndex].prefix.data1"/>
								</FormItem>
								<FormItem label="字段②">
									<Select v-model="componentUsed[componentIndex].field.data2" className="select-demo" :datas="fields"></Select>
								</FormItem>
								<FormItem label="前缀②">
									<input type="text" v-model="componentUsed[componentIndex].prefix.data2"/>
								</FormItem>
								<FormItem label="字段③">
									<Select v-model="componentUsed[componentIndex].field.data3" className="select-demo" :datas="fields"></Select>
								</FormItem>
								<FormItem label="前缀③">
									<input type="text" v-model="componentUsed[componentIndex].prefix.data3"/>
								</FormItem>
								<FormItem label="字段④">
									<Select v-model="componentUsed[componentIndex].field.data4" className="select-demo" :datas="fields"></Select>
								</FormItem>
								<FormItem label="前缀④">
									<input type="text" v-model="componentUsed[componentIndex].prefix.data4"/>
								</FormItem>
								<FormItem label="字段⑤">
									<Select v-model="componentUsed[componentIndex].field.data5" className="select-demo" :datas="fields"></Select>
								</FormItem>
								<FormItem label="前缀⑤">
									<input type="text" v-model="componentUsed[componentIndex].prefix.data5"/>
								</FormItem>
								<FormItem label="字段⑥">
									<Select v-model="componentUsed[componentIndex].field.data6" className="select-demo" :datas="fields"></Select>
								</FormItem>
								<FormItem label="前缀⑥">
									<input type="text" v-model="componentUsed[componentIndex].prefix.data6"/>
								</FormItem>
								<FormItem label="字段⑦">
									<Select v-model="componentUsed[componentIndex].field.data7" className="select-demo" :datas="fields"></Select>
								</FormItem>
								<FormItem label="前缀⑦">
									<input type="text" v-model="componentUsed[componentIndex].prefix.data7"/>
								</FormItem>
							</Form>
						</FormItem>
						<FormItem label="关联" v-if="componentUsed[componentIndex].sign=='infoBox'" single>
							<h-switch v-model="componentUsed[componentIndex].parserBox" @input="refresh">
								<span slot="open">富文本框</span>
								<span slot="close">富文本框</span>
							</h-switch>
							<h-switch v-model="componentUsed[componentIndex].swiperBox" @input="refresh">
								<span slot="open">轮播图</span>
								<span slot="close">轮播图</span>
							</h-switch>
							<h-switch v-model="componentUsed[componentIndex].magicBlock" @input="refresh">
								<span slot="open">魔法方块</span>
								<span slot="close">魔法方块</span>
							</h-switch>
							<h-switch v-model="componentUsed[componentIndex].postForm" @input="refresh">
								<span slot="open">表单</span>
								<span slot="close">表单</span>
							</h-switch>
						</FormItem>
					</Form>
				</div>
			</div>
		</div>
		<Modal v-model="paramModal">
			<div slot="header">参数配置</div>
			<Form :label-width="80" mode="twocolumn" v-if="params && componentIndex > -1 && setIndex > -1">
				<FormItem v-for="(item, index) of params" :key="'p'+index" :label="item.name">
					<CategoryPicker :option="{keyName:'id',titleName:'name',parentName:'fid',dataMode:'list',getTotalDatas:(resolve)=>{$global.categoryBug(resolve,item.datas)}}" @input="loadForm" v-model="componentUsed[componentIndex].datas[setIndex].param[item.id]"></CategoryPicker>
				</FormItem>
				<FormItem label="数量">
					<input type="text" v-model="componentUsed[componentIndex].datas[setIndex].param.pageSize"/>
				</FormItem>
				<Render v-for="(item,index) in paramForms" :key="index" :conf="item || {}"></Render>
			</Form>
			<div slot="footer">
				<Button color="primary" @click="saveParam">确定</Button>
				<Button @click="paramModal=false">取消</Button>
			</div>
		</Modal>
		<Modal v-model="fieldModal">
			<div slot="header">字段设置</div>
			<Form :label-width="80" mode="twocolumn" v-if="fields && componentIndex > -1 && setIndex > -1">
				<FormItem label="字段①">
					<Select v-model="componentUsed[componentIndex].datas[setIndex].field.data1" className="select-demo" :datas="fields"></Select>
				</FormItem>
				<FormItem label="字段②">
					<Select v-model="componentUsed[componentIndex].datas[setIndex].field.data2" className="select-demo" :datas="fields"></Select>
				</FormItem>
				<FormItem label="字段③">
					<Select v-model="componentUsed[componentIndex].datas[setIndex].field.data3" className="select-demo" :datas="fields"></Select>
				</FormItem>
				<FormItem label="字段④">
					<Select v-model="componentUsed[componentIndex].datas[setIndex].field.data4" className="select-demo" :datas="fields"></Select>
				</FormItem>
				<FormItem label="字段⑤">
					<Select v-model="componentUsed[componentIndex].datas[setIndex].field.data5" className="select-demo" :datas="fields"></Select>
				</FormItem>
				<FormItem label="字段⑥">
					<Select v-model="componentUsed[componentIndex].datas[setIndex].field.data6" className="select-demo" :datas="fields"></Select>
				</FormItem>
				<FormItem label="字段⑦">
					<Select v-model="componentUsed[componentIndex].datas[setIndex].field.data7" className="select-demo" :datas="fields"></Select>
				</FormItem>
				<FormItem label="字段⑧">
					<Select v-model="componentUsed[componentIndex].datas[setIndex].field.data8" className="select-demo" :datas="fields"></Select>
				</FormItem>
			</Form>
			<div slot="footer">
				<Button color="primary" @click="saveField">确定</Button>
				<Button @click="fieldModal=false">取消</Button>
			</div>
		</Modal>
		<Modal v-model="prefixModal">
			<div slot="header">前缀设置</div>
			<Form :label-width="80" mode="twocolumn" v-if="componentIndex > -1 && setIndex > -1">
				<FormItem label="前缀①">
					<input type="text" v-model="componentUsed[componentIndex].datas[setIndex].prefix.data1"/>
				</FormItem>
				<FormItem label="前缀②">
					<input type="text" v-model="componentUsed[componentIndex].datas[setIndex].prefix.data2"/>
				</FormItem>
				<FormItem label="前缀③">
					<input type="text" v-model="componentUsed[componentIndex].datas[setIndex].prefix.data3"/>
				</FormItem>
				<FormItem label="前缀④">
					<input type="text" v-model="componentUsed[componentIndex].datas[setIndex].prefix.data4"/>
				</FormItem>
				<FormItem label="前缀⑤">
					<input type="text" v-model="componentUsed[componentIndex].datas[setIndex].prefix.data5"/>
				</FormItem>
				<FormItem label="前缀⑥">
					<input type="text" v-model="componentUsed[componentIndex].datas[setIndex].prefix.data6"/>
				</FormItem>
				<FormItem label="前缀⑦">
					<input type="text" v-model="componentUsed[componentIndex].datas[setIndex].prefix.data7"/>
				</FormItem>
				<FormItem label="前缀⑧">
					<input type="text" v-model="componentUsed[componentIndex].datas[setIndex].prefix.data8"/>
				</FormItem>
			</Form>
			<div slot="footer">
				<Button color="primary" @click="savePrefix">确定</Button>
				<Button @click="prefixModal=false">取消</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
import {Render} from '@/components/custom-form'
import draggable from "vuedraggable"
import TopBox from '@/components/app-component/topBox'
import ButtonBox from '@/components/app-component/buttonBox'
import ImgBox from '@/components/app-component/imgBox'
import Search from '@/components/app-component/search'
import SwiperBox from '@/components/app-component/swiperBox'
import BannerBox from '@/components/app-component/bannerBox'
import ListBox from '@/components/app-component/listBox'
import TabBar from '@/components/app-component/tabBar'
import UserBox from '@/components/app-component/userBox'
import ParserBox from '@/components/app-component/parserBox'
import RichTextEditor from '@/components/richtext-editor'
import InfoBox from '@/components/app-component/infoBox'
import MagicBlock from '@/components/app-component/magicBlock'
import PostForm from '@/components/app-component/postForm'
import CategoryBox from '@/components/app-component/categoryBox'
import ColorPicker from 'heyui/lib/components/color-picker'
export default {
	components: {
		Render,
		draggable,
		TopBox,
		ButtonBox,
		ImgBox,
		Search,
		SwiperBox,
		BannerBox,
		ListBox,
		TabBar,
		UserBox,
		ParserBox,
		RichTextEditor,
		InfoBox,
		MagicBlock,
		PostForm,
		ColorPicker,
		CategoryBox
	},
	props: {
		id: Number,
		default : 0
	},
	data() {
		return {
			params : [],
			fields : [],
			paramForms : [],
			setIndex : -1,
			paramModal : false,
			fieldModal : false,
			prefixModal : false,
			loading : false,
			styleConfig : {},
			data : {},
			leftComponent : {
				topBox : {name:'顶栏',icon:'icon suoxiao'},
				swiperBox : {name:'轮播图',icon:'icon shuji'},
				buttonBox : {name:'按钮组',icon:'icon shebeimingcheng'},
				imgBox : {name:'图片组',icon:'icon huihua'},
				bannerBox : {name:'辅助框',icon:'icon qiapian'},
				listBox : {name:'列表框',icon:'icon biaoge'},
				tabBar : {name:'底部菜单',icon:'icon quanpingmu'},
				userBox : {name:'用户框',icon:'icon geren'},
				parserBox : {name:'富文本框',icon:'icon bianji1'},
				infoBox : {name:'数据模型',icon:'icon xinhao'},
				magicBlock : {name:'魔法方块',icon:'icon hezi1'},
				postForm : {name:'表单',icon:'icon bianji'},
				search : {name:'搜索框',icon:'icon sousuo'},
				categoryBox : {name:'分组框',icon:'icon libao'}
			},
			componentList : [
				{sign:'userBox',pic:'static/user_bg.jpg'},
				{sign:'topBox',type:2},
				{sign:'swiperBox',height:50,mode:'scaleToFill',datas:[{pic:'static/floor.jpg'}]},
				{sign:'buttonBox',datas:[{name:'按钮',pic:'static/icon.png'}]},
				{sign:'imgBox',datas:[{pic:'static/floor1.jpg'}],height:50},
				{sign:'bannerBox',pic:'static/icon.png'},
				{sign:'listBox',url:'product',type:false,filter:false,datas:[{param:{pageSize:20},field:{data1:'id'},prefix:{data1:'编号:'}}]},
				{sign:'tabBar',datas:[{name:'首页',pic:'static/home.png',selected:'static/home_on.png'}]},
				{sign:'parserBox',datas:'<center><h1>...</h1></center>'},
				{sign:'infoBox',url:'product',prefix:{},extend:false,field:{},parserBox:false,swiperBox:false,magicBlock:false,postForm:false},
				{sign:'magicBlock',config:{top:50,left:50,width:30,height:20,radius:10,background:'#ff0000'},font:{text:'',size:24,color:'#000000'}},
				{sign:'postForm',form_id:0,button:false},
				{sign:'search',datas:[{'name':'请输入需要查询的商标'}]},
				{sign:'categoryBox',url:'cate',datas:[]},
			],
			componentUsed : [],
			componentIndex : -1,
			events : [
				{event:'goto()',name:'跳转'},
				{event:'back()',name:'返回'},
				{event:'share()',name:'分享'},
				{event:'login()',name:'登录'},
				{event:'order()',name:'下单'},
				{event:'favorite()',name:'收藏'},
				{event:'contact()',name:'客服'}
			]
		}
	},
	watch:{
		'componentUsed' : {
			handler(value,oldVal){
				
			},
			deep:true
		}
	},
	mounted() {
		this.create()
	},
	methods: {
		async create(){
			this.styleConfig = await this.$api('GET','style/create')
			this.getData()
		},
		async getData() {
			if(this.id > 0){
				this.data = await this.$api('GET','style/'+this.id)
				this.componentUsed = this.data.data || '[]'
			}
		},
		async submit (){
			this.loading = true
			let res = await this.$api('PUT','style/'+this.id,{name:this.data.name,data:this.componentUsed})
			this.loading = false
			if(res){
				this.close()
			}
		},
		close (){
			this.$emit('close')
		},
		copyEnd({oldIndex,newIndex}) {//组件深拷贝
			let item = JSON.parse(JSON.stringify(this.componentList[oldIndex]))
			this.componentList.splice(oldIndex, 1,item)
		},
		changeModel (){
			if(this.componentUsed[this.componentIndex].sign=='listBox'){
				this.componentUsed[this.componentIndex].datas.forEach(v=>{
					v.param =  {pageSize:20}
					v.field = {data1:'id'}
					v.prefix = {data1:'编号:'}
				})
			}
		},
		refresh(){
			//刷新显示
			this.$set(this.componentUsed,this.componentIndex,this.componentUsed[this.componentIndex])
			if(this.componentUsed[this.componentIndex].url){
				let url = JSON.parse(JSON.stringify(this.componentUsed[this.componentIndex].url))
				this.$set(this.componentUsed[this.componentIndex],'url','')
				setTimeout(()=>{this.$set(this.componentUsed[this.componentIndex],'url',url)},1)
			}
		},
		loadForm(){
			if(this.setIndex > -1){
				let model = this.$global.getArray(this.styleConfig.models,this.componentUsed[this.componentIndex].url,'url')
				this.fields = [{name:'基础',isLabel: true}]
				this.fields = this.fields.concat((model.fields || []))
				this.fields.push({name:'表单',isLabel: true})
				this.params = JSON.parse(JSON.stringify(model.params || []))
				let cate_id = this.componentUsed[this.componentIndex].datas[this.setIndex].param.cate_id
				let form_id = this.$global.getArrayById(this.$global.config.cates,cate_id,'form_id')
				this.paramForms = []
				if(form_id > 0){
					this.componentUsed[this.componentIndex].datas[this.setIndex].param.form_id = form_id
					let form = this.$global.getArrayById(this.$global.config.forms,form_id,'data')
					if(form){
						let formData = this.componentUsed[this.componentIndex].datas[this.setIndex].param.form || {}
						form.forEach(v =>{
							if(v.type == 'select' || v.type == 'checkbox' || v.type == 'radio'){
								v.value = null
								for(let index in formData) {
									if(index == v.field){
										v.value = formData[index]
									}
								}
								this.paramForms.push(v)
							}
							if(this.fields.findIndex(field => field.id == 'form->'+v.field) == -1){
								this.fields.push({id:'form->'+v.field,name:v.name})
							}
						})
					}
				}
			}
		},
		setParam(index){
			this.setIndex = index
			this.paramModal = true
			this.loadForm()
		},
		saveParam(){
			this.paramModal = false
			if(this.paramForms.length > 0){
				this.componentUsed[this.componentIndex].datas[this.setIndex].param.form = this.$global.getCustomFormData(this.paramForms)
			}
			this.refresh()
		},
		setField(index){
			this.setIndex = index
			this.fieldModal = true
			this.loadForm()
		},
		saveField(){
			this.fieldModal = false
			this.refresh()
		},
		setPrefix(index){
			console.log(this.componentUsed[this.componentIndex].datas[index].prefix)
			this.setIndex = index
			this.prefixModal = true
		},
		savePrefix(){
			this.prefixModal = false
			console.log(this.componentUsed[this.componentIndex].datas[this.setIndex].prefix)
			this.refresh()
		},
		addDatas() {
			if(this.componentUsed[this.componentIndex].sign=='listBox'){				
				this.componentUsed[this.componentIndex].datas.push({row:1,param:{pageSize:20},field:{data1:'id'},prefix:{data1:'编号:'}})
				this.refresh()
			}else{
				this.componentUsed[this.componentIndex].datas.push({})
			}
		},
		removeDatas(index) {
			this.componentUsed[this.componentIndex].datas.splice(index, 1)
			if(this.componentUsed[this.componentIndex].sign=='listBox'){
				this.refresh()
			}
		},
		removeEle(index) {
			if(index > -1 && index < this.componentUsed.length){
				setTimeout(()=>{
					this.componentIndex = -1
					this.$set(this.componentUsed,index,'')
					this.componentUsed.splice(index, 1)
				},10)
			}
		},
		upEle(index) {
			let old = this.componentUsed[index]
			this.componentUsed.splice(index, 1,this.componentUsed[index-1])
			this.componentUsed.splice(index-1, 1,old)
			setTimeout(()=>{
				this.componentIndex = index-1
			},10)
		},
		downEle(index) {
			let old = this.componentUsed[index]
			this.componentUsed.splice(index, 1,this.componentUsed[index+1])
			this.componentUsed.splice(index+1, 1,old)
			setTimeout(()=>{
				this.componentIndex = index+1
			},10)
		}
	},
	computed: {
		// 拖拽表单1
		dragOptions1() {
			return {
				animation: 150,
				ghostClass: "ghost",
				// 分组
				group: {
				name: "shared",
				pull: "clone",
				revertClone: false
				},
				// 禁止拖动排序
				sort: false
			};
		},
		// 拖拽表单2
		dragOptions2() {
			return {
				animation: 150,
				ghostClass: "ghost",
				group: {
				// 只允许放置shared的控件,禁止pull
				put: ["shared"]
				}
			};
		}
	}
};
</script>

<style lang="less">
.app-edit{
	.h-form-item{
		padding: 10px !important;
	}
	.app-component-list {
		height: 667px;
		overflow-x:hidden;
		div{
			text-align: center;
			width: 80px;
			border: 1px solid #ccc;
			margin: 5px;
			background: #f5f5f5;
			p{
				margin: 0;
			}
			.icon {
				color: #888;
				font-size: 24px;
			}
		}
	}
	.phone-component {
		background-color: #f5f5f5;
		width: 380px;
		height: 667px;
		border: 1px solid #000;
		overflow-x:hidden;
		position: relative;
		&::-webkit-scrollbar {
		  width: 5px;
		  height: 5px;
		  background: transparent;
		}
		&::-webkit-scrollbar-thumb {
		  background: transparent;
		  border-radius: 4px;
		}
		&:hover::-webkit-scrollbar-thumb {
		  background: hsla(0, 0%, 53%, 0.4);
		}
		&:hover::-webkit-scrollbar-track {
		  background: hsla(0, 0%, 53%, 0.1);
		}
		.phone-component-item{
			width: 373px;
			border: 1px solid #f5f5f5;
			cursor:move;
		}
		.phone-component-item:hover{
			border: 1px dashed #0000ff;
			.magic-block:hover,.search-view:hover,.title-view:hover,.tabbar:hover{
				border: 1px dashed #0000ff;
			}
		}
		.checked{
			border: 1px solid #ff0000;
			box-sizing: border-box;
			.magic-block,.search-view,.title-view,.tabbar{
				border: 1px solid #ff0000;
			}
		}
	}
	.formSet{
		height: 505px;
		overflow-x:hidden;
	}
	.datasList{
		.h-uploader-image-empty{
			height: 29px;
			width: 100%;
		}
		.h-uploader-image-container{
			width: 100%;
		}
		.h-uploader-image{
			height: 29px;
			width: 100%;
		}
		.addnew {
			text-align: center;
			padding: 5px;
		}
		.addnew:before{
			color: #008000;
			padding: 0 5px;
			font-weight: bold;
			content:'+';
		}
		.delete{
			font-size: 16px;
			position: absolute;
			right:-40px;
			top:0;
			bottom: 0;
		}
		.datasItem{
			.h-form-item{
				padding:5px 10px !important;
			}
			width: calc(100% - 30px);
			position: relative;
			border-bottom: 1px solid @primary-color;
		}
		.datasItem:after{
			content:"";
			display:block;
			clear:both;
		}
	}
}
</style>